
<link rel="stylesheet" href="/assets/home/css/search.css">
<!-- 引入下拉刷新上拉加载插件 -->
<link rel="stylesheet" href="/assets/home/plugin/mescroll/mescroll.min.css" />
<script src="/assets/home/plugin/mescroll/mescroll.min.js"></script>
<style>
    #mescroll{
        height: calc(100% - 114px);
        overflow: auto;
    }
</style>


<body>
    <!-- 搜索框 -->
    <div class="mui-input-row mui-search">
        <input id="search" type="search" class="mui-input-clear" placeholder="请输入课程名称" name="search" />
    </div>

    <!-- 课程列表 -->
    <div id="mescroll">
        <ul class="mui-table-view" id="list">
            
        </ul>
    </div>
    

    <!-- 底部 -->
    {include file="common/menu" /}
</body>

<script>
    let page = 1;
    let limit = 20;
    let total = 0;
    let key = '';

    $('#search').change(function(){
        key = $(this).val()

        request(true)
    })

    const mescroll = new MeScroll('mescroll', {
        down: {
            auto: false, //是否在初始化完毕之后自动执行下拉回调callback; 默认true
            callback: DownCallback //下拉刷新的回调
        },
        up: {
            page: {
                num: 0, //默认从第0页开始起步
                size: 20, //每页显示多少条
                time: null, //时间
            },
            auto: true, //是否在初始化时以上拉加载的方式自动加载第一页数据; 默认false
            isBounce: false, //此处禁止ios回弹,解析(务必认真阅读,特别是最后一点): http://www.mescroll.com/qa.html#q10
            callback: UpCallback, //上拉回调,此处可简写; 相当于 callback: function (page) { upCallback(page); }
            htmlNodata: `<div class="more">没有更多了..</div>`, //没有更多数据的结构配置
            toTop:{ //配置回到顶部按钮
                duration: 600,
                src : "/assets/home/images/mescroll-totop.png", //默认滚动到1000px显示,可配置offset修改
                offset : 100
            }
        }
    })

    function DownCallback(){
        console.log('down');
        
        page = 1

        request(true)
    }

    function UpCallback(current){
        console.log('up');

        page = current.num;
        limit = current.size;

        request()
    }

    // 请求方法
    function request(isEmpty = false){
        
        $.ajax({
            url: `{:url('home/index/search')}`,
            type: 'post',
            data: {
                page: page,
                limit: limit,
                search: key
            },
            dataType: 'json',
            success(res){
                total = res.data.count;

                render(res.data.data, isEmpty)

                mescroll.endBySize(res.data.data.length, total)
            },
            error(err){
                console.log(err);
            }
        })
    }

    // 渲染函数
    function render(data = [], isEmpty = false){
        if(isEmpty){
            // 置空
            $('#list').empty()
        }

        data.forEach(item=>{
            const node = `
            <li class="mui-table-view-cell mui-media">
                <a class="item" href="{:url('home/index/info')}?pid=${item.id}">
                    <div class="thumb">
                        <img class="img" src="${item.thumbs_text}">
                    </div>
                    <div class="info">
                        <h5 class="title">${item.title}</h5>
                        <p class="content mui-ellipsis">课程分类：${item.category.name}</p>
                        <p class="content mui-ellipsis">创建时间：${item.createtime_text}</p>
                        <p class="bottom">
                            <span class="like mui-icon mui-icon-starhalf">
                                <span>${item.likes_text}</span>
                            </span>
                            <span class="price">￥${item.price}</span>
                        </p>
                    </div>
                </a>
            </li>
            `

            $('#list').append(node)
        })
    }
</script>
